/*
 * @Author: hy
 * @Date: 2018-05-02 09:52:10
 * @Last Modified by: hy
 * @Last Modified time: 2018-05-16 21:31:03b4038
 */

// 任选9提交页面

import React, { Component } from 'react'
import {
  WingBlank, WhiteSpace, Tabs, Modal, Toast, Checkbox, Flex, ActionSheet,
} from 'antd-mobile'
import NavBar from '@components/navbar'
import { withRouter } from 'react-router-dom'
import Button from '@components/button'

@withRouter
export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 是否选中服务协议
      checkedAgreement: false,
      // 选中的玩法比率
      checkedData: [
        {
          name: '世界杯',
          hostName: '法国',
          guessName: '比利时',
          value: [2.48, 3.24, 3.05],
          checked: [3.24],
        },
        {
          name: '世界杯',
          hostName: '克罗地亚',
          guessName: '夫士大夫都',
          value: [2.48, 3.24, 3.05],
          checked: [3.24, 2.48],
        },
      ],
    }
  }


  /**
   * 提交购彩
   */
  onSubmit=() => {
    console.log('提交购彩')
  }


  /**
   * 删除一项
   */
  onDeleteItem=(item) => {
    Modal.alert('提示', '确定删除该项吗?', [
      { text: '取消', onPress: () => console.log('cancel') },
      { text: '确定', onPress: () => console.log('ok') },
    ])
  }


  /**
   * 添加编辑赛事
   */
  onAddEdit=() => {
    console.log('添加编辑赛事')
    this.props.history.push('/jczq/choose')
  }

  /**
   * 显示服务协议
   */
  onShowAgreeText=(e) => {
    e.stopPropagation()
    e.preventDefault()
    console.log('服务协议')
  }

  /**
   * 减去倍投
   */
  onMinus=() => {

  }

  /**
   * 增加倍投
   */
  onAdd=() => {

  }


  render() {
    const {
      checkedData,
      checkedAgreement,
    } = this.state
    const title = '任选9'
    return (
      <div className="page-box">
        <NavBar
          left={<span className="app-icon icon-left" onClick={this.props.history.goBack} />}
          title={title}
          right={null}
        />
        <div className="page-content contain-footer contain-agreement sfc-container sfc-submit-container">
          <div className="page-submit">
            <div className="paper-wrap content-wrap">
              {
                checkedData.map((item, index) => {
                  const result = (
                    <div className="list-box" key={index.toString()}>
                      <div className="item-right">
                        <div className={item.checked.indexOf(item.value[0]) !== -1 ? 'right-box checked' : 'right-box'}>
                          <p>{item.hostName}</p>
                          <p>主胜{item.value[0]}</p>
                        </div>
                        <div className={item.checked.indexOf(item.value[1]) !== -1 ? 'right-box checked' : 'right-box'}>
                          <p>VS</p>
                          <p>平{item.value[1]}</p>
                        </div>
                        <div className={item.checked.indexOf(item.value[2]) !== -1 ? 'right-box checked' : 'right-box'}>
                          <p>{item.guessName}</p>
                          <p>客胜{item.value[2]}</p>
                        </div>
                      </div>
                    </div>
                  )
                  return result
                })
              }
              <img src="resource/image/paper-header.png" className="paper-header" alt="" />
              <img src="resource/image/paper-footer.png" className="paper-footer" alt="" />
            </div>
          </div>
          {/* 用户协议和倍数 */}
          <div className="page-submit-footer">
            <div className="flex-row-base agreement">
              <Checkbox.AgreeItem data-seed="logId" checked={checkedAgreement} onChange={(e) => { this.setState({ checkedAgreement: e.target.checked }) }}>
                  我已阅读并同意
                <a onClick={this.onShowAgreeText} className="font-yellow">《用户服务协议》</a>
              </Checkbox.AgreeItem>
            </div>
            <div className="method-row flex-row-base">
              <div />
              <div className="row-right flex-row-base">
                <span onClick={this.onMinus}>—</span>
                <span>倍投1</span>
                <span onClick={this.onAdd}>＋</span>
              </div>
            </div>
          </div>
        </div>

        <div className="page-footer">
          <div className="dlt-footer">
            <div className="right-content">
              <p>合计<span className="font-red">2</span>元&nbsp;&nbsp;<span>共1注</span></p>
              {/* <p>预计奖金：<span className="font-red">12100321.323</span>元</p> */}
            </div>
            <Button type="red" disabled={false} onClick={this.onSubmit}>提交购彩</Button>
          </div>
        </div>
      </div>
    )
  }
}
